<template>
    <div>

        <el-image class="w-96" :src="url" :fit="fit" />
        <button @click="startChange()">开始切换</button>
    </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from "vue";
let count = ref(1);
let url = ref("http://127.0.0.1:8080/uploads/image.jpg")

var ws = new WebSocket("ws://localhost:8080/websocket");

ws.onopen = function (evt) {
    console.log("Connection open ...");
    ws.send("Hello WebSockets!");
};

ws.onmessage = function (evt) {
    console.log("Received Message: " + evt.data);
    if (evt.data === "update") {
        url.value = "http://127.0.0.1:8080/uploads/image" + count.value + ".jpg"
        count.value++;
    }
};

ws.onclose = function (evt) {
    console.log("Connection closed.");
}
// 组件被销毁之前，清空 socket 对象
onBeforeUnmount(() => {
    // 关闭连接
    websocketclose;
    // 销毁 websocket 实例对象
    socket = null;
});



</script>

<style scoped></style>